<template>
  <div>
      <!-- 头部区域 -->
      <Header></Header>
      <!-- 头部区域 -->

      <!-- 表单区域 -->
      <div class="udlite-container partners">
        <van-cell-group>
              <van-tabs v-model="active">
              <van-tab title='用户名登陆'> 
              <van-field v-model="username" label="用户名:" placeholder="请输入用户名"></van-field>
              </van-tab>
              <van-tab title='手机号登陆'> 
              <van-field v-model="username" label="手机号:" placeholder="请输入用手机号"></van-field>
              </van-tab>
              <van-tab title='邮箱登陆'> 
              <van-field v-model="username" label="邮箱:" placeholder="请输入用邮箱"></van-field>
              </van-tab>
              </van-tabs>
              <van-field v-model="password" label="密码:" placeholder="请输入密码"></van-field>
              <!-- 图片验证码 -->
              <van-cell-group>
                    <img :src="src" @click="changecode">
                    <van-field v-model="code" label="验证码:" placeholder="请输入验证码"></van-field>
              </van-cell-group>
              <!-- 滑块验证 -->
              <van-cell-group>
                  <drag-verify :width="width" :height="height" :text="text" ref="Verify">
                  </drag-verify>  
              </van-cell-group>
              <van-button type="primary" @click="login">登 录</van-button>
              <van-button type="info" @click="empty">重 置</van-button>
        </van-cell-group>
      </div>
      <!-- 尾部区域 -->
      <Footer></Footer>
      <!-- 尾部区域 -->
  </div>
</template>

<script>
import Header from './Header.vue'
import Footer from './Footer.vue'
// 滑块组件
import dragVerify from 'vue-drag-verify'
export default {
    components:{
        'Header':Header,
        'Footer':Footer,
        'dragVerify':dragVerify
    },
    data(){
        return{
            username:'',
            password:'',
            active:0,
            width:320,
            height:42,
            text:"请您拖动滑块",
            code:'',
            src:'http://127.0.0.1:8000/my_code'
        }
    },
    methods:{
        login(){
            if(this.active==0){
                if(this.username==''){
                    this.$toast('用户名不能为空')
                    return false
                }
            }
            if(this.active==1){
                if(this.username==''){
                    this.$toast('手机号不能为空')
                    return false
                }
            }
            if(this.active==2){
                if(this.username==''){
                    this.$toast('邮箱不能为空')
                    return false
                }
            }
            if(this.password==''){
                this.$toast('密码不能为空')
                return false
            }
            if(this.$refs.Verify.isPassing==false){
                this.$toast('请完成滑块验证')
                return false
            }
            else{
                let data = new FormData
                data.append('username',this.username),
                data.append('password',this.password),
                data.append('active',this.active)
                this.axios.post('http://127.0.0.1:8000/login',this.qs.stringify({
                    'username':this.username,
                    'password':this.password,
                    'active':this.active,
                    'code':this.code
                })).then(resp=>{
                console.log(resp.data)
                localStorage.setItem('jwt',resp.data.jwt)
                localStorage.setItem('username',this.username)
                if(resp.data.code==200){
                    this.$router.push('/myindex')
                }
            })
            }
        },
        empty(){
            this.username = '',
            this.password = '',
            this.code = ''
        },
        changecode(){
            var num = Math.ceil(Math.random()*10);
            this.src = this.src + "?num=" + num
        }
    }
}
</script>

<style type="text/css">

</style>